<template>
	<view>
		<template v-if="zhuanqu && zhuanqu.list.length > 0">
			<view class="card zhuanqu">
				<view class="zhuanqu-title">
					<view class="header">
						<view class="left">
							<text class="name">{{zhuanqu.name}}</text>
							<text class="tags">{{zhuanqu.tags}}</text>
						</view>
						<view class="right" @click="pageRoute(zhuanqu.link)">
							查看更多<uni-icons class="icon" type="right" size="18" color="#c2c2c2"></uni-icons>
						</view>
					</view>
					<view class="desc">{{zhuanqu.desc}}</view>
				</view>

				<view class="zhuanqu-list">
					<goods-list :goods="item" v-for="(item,index) in zhuanqu.list" :key="index"></goods-list>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';

	defineOptions({
		name: 'zhuanqu-goods'
	});

	const props = defineProps({
		zhuanqu: {
			type: Object,
			default: {},
		},
		type: {
			type: Number,
			default: 'life',
		}
	})

	function goGoods(item) {
		pageRoute(`/lifePages/${props.type}/product-detail?id=${item.id}`);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}
</script>

<style lang="scss">
	.card {
		overflow: hidden;
		background-color: $u-bg-reverse-color;
		margin-bottom: $m24;
		border-radius: $radius-12 $radius-12 0 0;
	}

	// 专区
	.zhuanqu {
		.zhuanqu-title {
			padding: 20rpx 20rpx 0 20rpx;
			display: flex;
			flex-direction: column;

			.header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.left {
					.name {
						font-size: 32rpx;
						font-weight: 600;
						color: #000;
					}

					.tags {
						position: relative;
						top: -2rpx;
						font-size: 22rpx;
						color: #ffffff;
						margin-left: 12rpx;
						padding: 4rpx 12rpx 4rpx 12rpx;
						border-radius: 17rpx;
						background: linear-gradient(to right, #ffbc00, #ff4900);
					}
				}

				.right {
					font-size: 24rpx;
					color: #7f7f7f;
					line-height: 70rpx;

					.icon {}
				}
			}

			.desc {
				color: #7f7f7f;
				// 文字超出,用省略点代替
				overflow-x: hidden;
				overflow-y: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				padding-bottom: 20rpx;
			}
		}

		.zhuanqu-list {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			overflow-x: auto;
			background-color: #ffffff;
			margin: 0rpx 15rpx 15rpx 15rpx;
		}
	}
</style>